<template>
	<view class="client">
		<view class="search">
			<u-icon name="search" color="#B2B2B8" size="26"></u-icon>
			<input type="text" value="" placeholder="搜索用户名" />
		</view>
		<view class="tabs">
			<view class="item" :class="activeIndex == 0? 'active':''" @click="onTabs(0)">
				待成交
				<view class="item-border">
					
				</view>
			</view>
			<view class="item" :class="activeIndex == 1? 'active':''" @click="onTabs(1)">
				已成交
				<view class="item-border">
					
				</view>
			</view>
			<view class="item" :class="activeIndex == 2? 'active':''" @click="onTabs(2)">
				已过期
				<view class="item-border">
					
				</view>
			</view>
		</view>
		<u-index-list :scrollTop="scrollTop" :index-list="indexList" >
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item"  />
				<view class="list-cell">
					<image src="../../static/img/financial/financial-top-bg.png" mode=""></image>
					<view class="right">
						<text>这是一个测试昵称</text>
						<text>电话：184 7337 4651</text>
					</view>
				</view>
				<view class="list-cell">
					<image src="../../static/img/financial/financial-top-bg.png" mode=""></image>
					<view class="right">
						<text>这是一个测试昵称</text>
						<text>电话：184 7337 4651</text>
					</view>
				</view>
				<view class="list-cell">
					<image src="../../static/img/financial/financial-top-bg.png" mode=""></image>
					<view class="right">
						<text>这是一个测试昵称</text>
						<text>电话：184 7337 4651</text>
					</view>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z", "#"
				],
				activeIndex:0
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			// 操作tabs
			onTabs(num){
				this.activeIndex = num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.client {
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;
		.search{
			margin: var(--status-bar-height) auto 0 auto;
			width: 650rpx;
			height: 80rpx;
			background: #f7f7fa;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			input{
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #333;
				width: 600rpx;
			}
		}
		.tabs{
			width: 650rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx auto;
			.item{
				font-size: 28rpx;
				color: #b0b0b6;
			}
			.active{
				font-size: 30rpx;
				font-weight: 700;
				color: #111111;
				.item-border{
					margin-top: 10rpx;
					width: 40rpx;
					height: 8rpx;
					background: linear-gradient(to right, #f9800c 0%, #fff 100%);
					border-radius: 4rpx;
				}
			}
		}
		.list-cell {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 20rpx 50rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.right{
				display: flex;
				flex-direction: column;
				text:first-child{
					font-size: 30rpx; 
					font-weight: 700;
					color: #4b4b4b;
				}
				text:last-child{
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
</style>
